<template>
	<view>
		<view class="order clearfix" v-for="item in myEvalutionData" :key="item.id">
			<view class="Personal-Information">
				<u-avatar :src="userInfo.avatar" size="50"></u-avatar>
				<view class="User-nickname">
					<view class="Comment-time">
						<text>{{userInfo.nickName}}</text>
						<text class="c-t">评价时间：{{formatTime(item.createTime)}}</text>
					</view>

					<view class="star">
						<text>评分</text>
						<u-rate :value="5" v-model="item.grade" readonly="true" gutter="0"></u-rate>
					</view>
					<view style="font-size: 25rpx;color: darkgrey;margin-left: 20rpx;">标签：{{item.label}}</view>
				</view>
			</view>
			<view class="comments">
				<text>{{item.content}}</text>
				<view class="Dish-content" v-if="item.image">
					<view class="food" >
						<image :src="item.image"></image>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { havaEvaluated } from '../../../common/http.api.js'
	export default {
		data() {
			return {
				src: '../../../static/img/1.jpg',
				count: 5,
				value: 2,
				userInfo: this.$store.state.userInfo,
				myEvalutionData: [],
				userId: this.$store.state.userId
			}
		},
		onLoad() {
			havaEvaluated(this.userId).then( res => {
				this.myEvalutionData = res.rows
				console.log(this.myEvalutionData)
			})
		},
		methods: {
			formatTime(time) {
				const orderTime = time ? new Date(parseInt(time)) : new Date()
				const year = orderTime.getFullYear()
				const mm = (orderTime.getMonth() + 1) < 10 ? ('0' + (orderTime.getMonth() + 1)) : (orderTime.getMonth() + 1)
				const dd = orderTime.getDate() < 10 ? ('0' + orderTime.getDate()) : orderTime.getDate()
				const hh = orderTime.getHours() < 10 ? ('0' + orderTime.getHours()) : orderTime.getHours()
				const min = orderTime.getMinutes() < 10 ? ('0' + orderTime.getMinutes()) : orderTime.getMinutes()
				const ss = orderTime.getSeconds() < 10 ? ('0' + orderTime.getSeconds()) : orderTime.getSeconds()
				return `${year}-${mm}-${dd} ${hh}:${min}:${ss}`
			},
		}
	}
</script>

<style>
	page {
		background-color: #eee;
	}

	.order {
		padding: 20rpx;
		width: 100vw;
		background-color: #fff;
		border-radius: 20rpx;
		font-size: 38rpx;
		box-sizing: border-box;
		border-bottom: solid #eee thin;
	}

	.order .Personal-Information {
		/* background-color: red; */
		display: flex;
		margin-bottom: 20rpx;


	}

	.order .Personal-Information .User-nickname text {
		display: block;
	}

	.order .Personal-Information .User-nickname .Comment-time {
		display: flex;
		justify-content: space-between;
		width: 620rpx;
	}

	.order .Personal-Information .User-nickname .Comment-time text {
		font-size: 35rpx;
		color: #4e667d;
	}

	.order .Personal-Information .User-nickname .Comment-time .c-t {
		font-size: 25rpx;
		color: #a7a6a8;
	}

	.order .Personal-Information .User-nickname .star {
		display: flex;
		margin-left: 20rpx;
	}

	.order .Personal-Information .User-nickname .star text {
		font-size: 28rpx;
		margin: 10rpx 0;
	}
.order .Personal-Information .User-nickname .star .u-rate{
	margin-left: 20rpx;
}
	.order .Personal-Information text {
		margin-left: 20rpx;
		font-size: 30rpx;
	}

	.order .food {
		margin: 10rpx;
		display: flex;
		justify-content: space-between;
	}

	.food image {
		height: 100rpx;
		width: 100rpx;
		border-radius: 10rpx;
	}

	.Dish-content {
		background-color: #eee;
		border: 1rpx solid #eee;
	}

	.comments {
		font-size: 28rpx;
		float: right;
		width: 590rpx;
	}

	/* 高度坍塌解决 */
	.clearfix::after {
		content: "";
		display: block;
		clear: both;
	}
</style>
